<template>
  <div>
      <div class="loading-main" v-if="showLoading">
          <div class="loading-box">
              <image class="loading-img" :src="loadingImg"></image> 
              <text class="loading-text myfont">{{gT('loadingText')}}</text>
          </div>
      </div>
  </div>
</template>

<style scoped>
    .loading-main{
        position: fixed;
        top: 0px;
        bottom: 0px;
        right: 0px;
        left: 0px;
        background: rgba(255, 255, 255,0.85);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 101;
    }
    .loading-box{
        width: 200px;
        height: 200px;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
        background: rgba(0, 0, 0, 0.85);
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .loading-text{
        color:#fff;
        font-size: 30px; 
    }
    .loading-img{
        width: 50px;
        height: 50px;
        margin-bottom: 15px;
    }

    .myfont{
        font-family: 'myfont';
        white-space: nowrap;
    }
    .myIconfont{
        font-family: 'iconfont';
    }
</style>

<script>
  // 全局变量
  var self;
  const dom = weex.requireModule('dom');
  module.exports = {
      //动态数据属性
      data : function () {
          return {
            loadingImg:''
          }
      },
      props: {
          showLoading: {
              default: false
          }
      },
      //组件实例创建完成，属性已绑定，但DOM还未生成
      created() {
          self = this;
          dom.addRule('fontFace', {
              'fontFamily': "myfont",
              'src': "url(" + self.gFontUrl + ")"
          });

          self.lang=self.gLang;
          self.loadingImg = self.gImageUrl + 'loading.gif';
      }
  }
</script>
